<template>
  <div>

    <el-form ref="form" :model="user" label-width="80px">
      <el-form-item label="名称">
        <el-input v-model="user.username" />
      </el-form-item>
      <el-form-item label="密码">
        <el-input v-model="user.password" type="password"/>
      </el-form-item>
      <el-form-item label="头像">
        <el-upload
          ref="upload"
          class="upload-demo"
          action="http://localhost:8082/upload"
          :on-preview="handlePreview"
          :on-remove="handleRemove"
          :file-list="fileList"
          :on-change="handleChange"
          :auto-upload="false"
          :show-file-list="false"
          accept=".jpg,.jpeg,.gif,.png,.bmp">
          <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
          <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
          <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
        </el-upload>
        <img :src="imgUrl" width="200" height="250"  alt=""/>
      </el-form-item>
      <el-form-item label="出生日期">
        <el-col :span="11">
          <el-date-picker
            v-model="user.birthday"
            type="date"
            placeholder="选择日期">
          </el-date-picker>
        </el-col>
      </el-form-item>
      <el-form-item label="电话">
        <el-input v-model="user.phone" type=""/>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">立即修改</el-button>
        <el-button @click="returnDetail">返回</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { update } from '@/api/user'

export default {
  name: 'Home',
  data() {
    return {
      user: {},
      fileList: [],
      dialogVisible: false,
      ruleForm: {
        dialogImageUrl: '1' // 专区logo 上传到后台之后，后台会返回一个id,只需要给后台传id,但是点击编辑的时候后台返回的是http地址
      },
      imgUrl: ''
    }
  },
  mounted() {
    this.getUser()
  },
  methods: {
    getUser: function() {
      this.user = JSON.parse(this.$route.query.user)
      console.log(this.user)
      this.imgUrl = this.user.img
    },
    onSubmit: function() {
      this.$confirm('是否修改?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        update({
          username: this.user.username,
          userId: this.user.userId,
          password: this.user.password,
          birthday: this.user.birthday,
          img: this.user.img,
          phone: this.user.phone
        }).then(res => {
          this.$message.success('成功')
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消修改'
        })
      })
    },
    returnDetail() {
      this.$router.push({
        path: '/userList',
        query: { user: JSON.stringify(this.user) }
      })
    },
    submitUpload() {
      this.$refs.upload.submit()
    },
    handleRemove(file, fileList) {
      console.log(file, fileList)
    },
    handlePreview(file) {
    },
    handleChange(file, fileList) {
      // this.fileList =[]
      this.fileList[0] = file
      const filename = file.name
      const regex = /(.jpg|.jpeg|.gif|.png|.bmp)$/
      if (regex.test(filename.toLowerCase())) {
        this.imgUrl = URL.createObjectURL(file.raw)
      } else {
        this.$message.error('请选择图片')
      }
    }
  }

}
</script>

<style scoped>

</style>
